<template>
    <div>
        <el-dialog v-model="dialogShow" title="-" :width="680" 
            draggable align-center :close-on-click-modal="false" :before-close="dialogClose">
            <template #header>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane :label="`未读人员 (${data.unReadNum || 0})`" name="0"></el-tab-pane>
                    <el-tab-pane :label="`已读人员 (${data.readNum || 0})`" name="1"></el-tab-pane>
                </el-tabs>
            </template>
            <div style="min-height: 200px;" v-loading="loading">
                <ul>
                    <li class="flex space-between margin-bottom-md" v-for="item in listData" :key="item.id">
                        <p>
                            <i class="icon-base icon-base-contactbookV2 margin-right-sm" v-if="item.readFlg == 'N'"></i>
                            <i class="icon-base icon-base-readed2 margin-right-sm" v-else></i>
                            <span>{{ item.userName || '-' }}</span>
                        </p>
                        <span v-if="item.readTime">{{ formatDate.dateTimeAllFormat( item.readTime) }}</span>
                    </li>
                    <li v-if="listData.length <= 0">
                        <el-empty :image-size="50" description="暂无人员信息" />
                    </li>
                </ul>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogClose">关 闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import { getReadStateUserList } from "@/api/notice.js"
    import { formatDate } from "@/utils/fomart"
    const props = defineProps( [ 'show', 'data' ] ); // 接收传参
    const emit = defineEmits( [ 'update:show', 'confirm'] ); // 回调注册
    const dialogShow = ref(false);
    const loading = ref(false);
    const activeName = ref('0');
    const listData = ref([]);
    watch(() => props.show, () => { 
        dialogShow.value = props.show;
        if(props.show) {
            activeName.value = '0';
            getReadUserList();
        }
    }); 
    const handleClick = (value) => {
        activeName.value = value.paneName;
        getReadUserList();
    };
    const getReadUserList = () => {
        loading.value = true;
        getReadStateUserList({
            noticeId: props.data.id,
            readFlg: activeName.value == '0' ? 'N' : 'Y'
        }).then(res => {
            loading.value = false;
            listData.value = res.data || []
        });
    };
    const dialogClose = () => {
        dialogShow.value = false;
        emit('update:show', false);
    };
</script>
<style scoped lang="scss">
    :deep(.el-dialog__body){
        padding: 0 30px;
    }
</style>